<template>
  <view class="sign-container">
    <!-- 顶部信息区域 -->
    <view class="top-section">
      <view class="avatar-section">
	     <image class="avatar":src="userInfo.avatar" v-if="userInfo.avatar" mode="aspectFill"></image>
	     <image src="https://bigironcollision.obs.cn-east-3.myhuaweicloud.com:443/temp%2Ftx_1757241357597.png" v-else mode="aspectFill" class="avatar"></image>
         <text class="sign-days">已连续签到{{continuousDays?continuousDays:0}}天</text>
      </view>
      <text class="tips">连续签到7天可获得60金币</text>
    </view>
    
    <!-- 金币描述 -->
    <view class="description">
      <text>签到得金币，直接当钱花</text>
    </view>
    
    <!-- 签到天数列表 -->
    <view class="days-list">
      <view class="day-item" v-for="(item, index) in dayList" :key="index">
        <text class="day-text">第{{item.day}}天</text>
        <image class="coin-icon" v-if="continuousDays>index" src="/static/img/yqian.png" mode="aspectFit"></image>
		<image class="coin-icon" v-else src="/static/img/wqian.png" mode="aspectFit"></image>
        <text class="coin-amount">{{item.coin}}金币</text>
      </view>
	  <view style="width: 160rpx;"></view>
    </view>
    
    <!-- 签到按钮 -->
    <view class="sign-btn" @click="handleSign">
      <text>{{isSignedToday ? '已签到' : '立即签到'}}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      continuousDays: 0, // 连续签到天数
      isSignedToday: false, // 今天是否已签到
      dayList: [
        { day: 1, coin: 5 },
        { day: 2, coin: 10 },
        { day: 3, coin: 15 },
        { day: 4, coin: 20 },
        { day: 5, coin: 25 },
        { day: 6, coin: 30 },
        { day: 7, coin: 60 }
      ],
	  userInfo:'',
    }
  },
  onLoad() {
  	this.userInfo= uni.getStorageSync("userInfo")
	this.getHeckInCount()
  },
  methods: {
	getHeckInCount(){
		uni.showLoading({
			title: '加载中'
		})
		this.$http('jeecg-boot/app/market/bicGoldRecord/getHeckInCount ',{
				
				
		},'GET').then(res => {
				   //console.log(res)
			 uni.hideLoading();
			 this.continuousDays=res.result
			
		 })
	},
    handleSign() {
		uni.showLoading({
			title: '加载中'
		})
		this.$http('jeecg-boot/app/market/bicGoldRecord/checkIn ',{
				
				
		},'GET').then(res => {
				   //console.log(res)
			 uni.hideLoading();
			 if(res.success){
				 uni.showToast({
				   title: '签到成功！',
				   icon: 'success'
				 });
				 this.getHeckInCount()
			 }else{
				 uni.showToast({
				  title: res.message,
				  icon:'none',
				  duration: 3000
				 });
			 }
			
		 })
     // if (this.isSignedToday) return;
      
      // 模拟签到逻辑
     /* this.isSignedToday = true;
      this.continuousDays += 1; */
      
    }
  }
}
</script>

<style>
/* 页面容器 */
.sign-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 顶部区域 */
.top-section {
  width: 100%;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.05);
  margin-bottom: 30rpx;
}

.avatar-section {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 30rpx;
  border: 4rpx solid #ffd700;
}

.sign-days {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.tips {
  display: block;
  font-size: 26rpx;
  color: #ff6b6b;
  padding-left: 150rpx;
}

/* 描述文字 */
.description {
  width: 100%;
  font-size: 30rpx;
  color: #666;
  text-align: center;
  padding: 20rpx 0;
 /* border-bottom: 2rpx dashed #ddd; */
}

/* 天数列表 */
.days-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 60rpx;
}

.day-item {
  width: 160rpx;
  height: 180rpx;
  background-color: #fff;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
  box-shadow: 0 5rpx 15rpx rgba(0,0,0,0.05);
}

.day-text {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 15rpx;
}

.coin-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}

.coin-amount {
  font-size: 26rpx;
  color: #ff9800;
  font-weight: bold;
}

/* 签到按钮 */
.sign-btn {
  width: 80%;
  height: 100rpx;
  background: linear-gradient(to right, #ff5e5e, #ff2d2d);
  border-radius: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 36rpx;
  font-weight: bold;
  box-shadow: 0 10rpx 20rpx rgba(255, 45, 45, 0.3);
  margin-top: 40rpx;
  position: fixed;
  bottom: 80rpx;
  
}

.sign-btn:active {
  opacity: 0.9;
  transform: scale(0.98);
}
</style>